<template>
  <div :class="$style.inbox">
    <ContentWrap>
      <Query receive @refresh="queryHandle" />
      <table-box ref="table" no-request :other-filters="otherFilters" :table-config="tableConfig" />
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import Query from '../components/query'
import Detail from '../components/detail'
import { filtersRaw } from '@/utils'
import { deleteByIdEmailRecord } from '@/api/email'
export default {
  name: 'Inbox',
  components: {
    ContentWrap,
    Query,
    // eslint-disable-next-line vue/no-unused-components
    Detail
  },
  data() {
    return {
      otherFilters: [],
      inEmail: filtersRaw('type', 2, '='),
      tableConfig: {
        interfacePath: '/call-center/api/v1/emailRecord/page',
        pageFlag: true,
        sort: 'sendDate',
        order: 'desc',
        hideFuncBar: true,
        // 表格字段动态配置
        setting: [
          {
            label: '序号',
            formatData: v => v.keyIndex + 1,
            width: '80',
            align: 'center'
          },
          {
            prop: 'sysEmailAddress',
            label: '发送邮箱'
            // formatData: v => v.tos.map(e => e.emailAddress).join(',')
          },
          {
            prop: 'theme',
            label: '邮件主题'
          },
          {
            prop: 'sendDate',
            label: '收件时间'
          },
          {
            prop: 'isAnnex',
            label: '有无附件',
            formatData: v => v.isAnnex === 1 ? '有' : '无'
          },
          {
            label: '操作',
            align: 'center',
            overflowHidden: false,
            render: (_, row) => {
              return (
                <div>
                  <Detail id={row.id}></Detail>
                  <Button isText type='text' onClick={() => this.replayHancle(row)}>回复</Button>
                  <Button isText type='text' remove onClick={() => this.removeHancle(row)}>删除</Button>
                </div>
              )
            }
          }

        ]
      }
    }
  },
  methods: {
    // 根据条件查询
    queryHandle(data) {
      this.otherFilters = [
        this.inEmail,
        ...data
      ]
      this.refreshHandle()
    },
    // 刷新
    refreshHandle(onPage) {
      this.$nextTick(() => {
        this.$refs.table.initTableData(onPage)
      })
    },
    // 回复
    replayHancle(row) {
      this.$router.push({ name: 'SendEmail', query: { emailAddresseeList: row.tos.map(e => e.emailAddress).join(',') }})
    },
    // 删除
    removeHancle(row) {
      this.$msgbox({
        title: '删除',
        message: '确认删除？',
        showCancelButton: true,
        type: 'warning'
      }).then(() => {
        deleteByIdEmailRecord(row.id).then(res => {
          this.$message.success('删除成功！')
          this.refreshHandle('onPage')
        })
      })
    }
  }
}
</script>
<style lang='scss' module>
.inbox{
  [class*="table-button-box"]{
    [class*="el-button--mini"]{
      padding-right: 0 !important;
    }
  }
}
</style>
